<template>
<div class="details_box">

   <div class="details_box__top" >
     <ShowDetails :data-obj="personData" />
   </div>

   <div class="details_box__bottom">
     <JxTable />
   </div>

</div>
</template>

<script>
import JxTable from "@/components/JxTable/index.vue";
import ShowDetails from "@/components/JxDetails/ShowDetails.vue";
export default {
  name:'JxDetails',
  components: {
    JxTable,
    ShowDetails
  },
  data(){
    return{
      viewportHeight:0,
      personData: {}
    }
  },

  watch:{
    viewportHeight(v){
      document.querySelector('.details_box').style.height = v + 'px'
    }
  }
}
</script>

<style scoped>
.details_box {
  width: 100%;
  height: 200px;
}

.details_box__top, .details_box__bottom {
  margin-left: 20px;
}
</style>